<script>
// 动作列表
import {changeActionStatus, deleteAction, getActionPageList} from "@/api/aihuman/humanAssets/actionType";
import AddAction from "@/views/aihuman/HumanAssets/actionType/AddAction.vue";
import {mapGetters} from "vuex";
import EmptyData from "@/components/aihuman/EmptyData/index.vue";
import {getUrl} from "@/util/aihuman/getUrl";

export default {
  name: "ActionContainer",
  components: {EmptyData, AddAction},
  data() {
    return {
      loading: false,
      searchForm: {
        packageId: '',
        actionName: '',
        actionIdUe: '',
        actionMeaning: ''
      },
      // 资产类别分组 男-女
      groupId: '',
      // 数字人类型
      type: '',
      searchFieldList: [
        {
          prop: 'actionName',
          placeholder: '请输入动作名称',
        },
        {
          prop: 'actionIdUe',
          placeholder: '请输入动作id',
        },
        {
          prop: 'actionMeaning',
          placeholder: '请输入动作含义',
        },
      ],
      paging: {
        pageNo: 1,
        pageSize: 12,
        total: 0
      },
      list: [],
      selectedList: [],
      isShowCheck: false,
      imageExtensions: ["jpg", "jpeg", "png", "gif", "bmp", "webp"],
      videoExtensions: ["mp4", "webm", "ogg", "mov"]
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addPackBtn: this.vaildData(this.permission[`assets-action-addpack`], false),
        editPackBtn: this.vaildData(this.permission[`assets-action-editpack`], false),
        enablePackBtn: this.vaildData(this.permission['assets-action-status-pack'], false),
        deletePackBtn: this.vaildData(this.permission['assets-action-delete-pack'], false),
        addBtn: this.vaildData(this.permission['assets-action-add'], false),
        editBtn: this.vaildData(this.permission['assets-action-edit'], false),
        deleteBtn: this.vaildData(this.permission['assets-action-delete'], false),
      }
    }
  },
  methods: {
    getUrl,
    /**
     * 检查文件扩展名
     * @param {String} path
     * @returns {*|boolean}
     */
    checkExtension(path) {
      if (!path) return false;
      const extension = path.split(".").pop().toLowerCase();
      return this.imageExtensions.includes(extension);
    },
    editAction(item) {
      this.$refs.addAction.open('edit', this.groupId, item)
    },
    previewAction(item) {
      this.$refs.addAction.open('preview', this.groupId, item)
    },
    addAction() {
      this.$refs.addAction.open('add', this.groupId, {packageId: this.searchForm.packageId, actionType: this.type})
    },
    async toggleAction(row) {
      const {data} = await changeActionStatus({id: row.id, status: row.status ^ 1})
      this.$message.success(data.msg)
      this.getList()
    },
    removeItem(item) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let ids = [item.id]

        let params = {
          ids: ids.join(",")
        }
        const {data} = await deleteAction(params)
        this.$message({
          type: 'success',
          message: data.msg
        })
        this.getList()
      });
    },
    async batchRemove() {
      this.selectedList = this.list.filter(item => item.checked)
      if (this.selectedList.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择需要处理的数据",
        });
        return false
      }

      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let ids = this.selectedList.map(item => item.id)

        let params = {
          ids: ids.join(",")
        }
        const {data} = await deleteAction(params)
        this.$message({
          type: 'success',
          message: data.msg
        })
        this.selectedList = []
        this.getList()
      });

    },
    searchFn() {
      console.log(this.searchForm);
      this.paging.pageNo = 1
      this.getList()
    },
    playVideo(e) {
      e.target.loop = true
      e.target.play()
    },
    pauseVideo(e) {
      e.target.loop = false
      e.target.pause()
    },
    getList() {
      this.$nextTick(async () => {
        this.loading = true
        const {data} = await getActionPageList({...this.paging, ...this.searchForm})
        this.list = data.data.records.map(item => {
          return {
            ...item,
            checked: false
          }
        })
        this.paging.total = data.data.total
        this.loading = false
      })
    },
    batchSet() {
      this.isShowCheck = !this.isShowCheck
      if (this.isShowCheck === false) {
        this.list.forEach(item => {
          item.checked = false
        })
      }
    },
    selectAll() {
      this.list.forEach(item => {
        item.checked = true
      })
    }
  }
}
</script>

<template>
  <div class="action-container">
    <div class="btn-block">
      <el-button v-if="permissionList.addBtn" type="success" size="small" @click="addAction">添加动作</el-button>
      <el-button v-if="permissionList.deleteBtn" type="primary" @click="batchSet" size="small">
        {{ isShowCheck ? '取消' : '批量管理' }}
      </el-button>
      <template v-if="isShowCheck">
        <el-button type="text" @click="selectAll" size="small">全选本页</el-button>
        <el-button type="text" size="small" @click="batchRemove">批量删除</el-button>
      </template>
    </div>
    <HuilanBasicSearchbar :model="searchForm" :fields="searchFieldList" @search="searchFn" @reset="getList">

    </HuilanBasicSearchbar>

    <template v-if="paging.total > 0">

      <div class="img-list-block" v-loading="loading">
        <ul>
          <li class="img-list-item" v-for="item in list" :key="item.id">
            <div :class="['img-list-item__status', {'img-list-item__status--disable': item.status === 1}]">
              {{ item.status === 0 ? '已开启' : '已停用' }}
            </div>

            <div class="img-list-item__cont">
              <div class="img-list-item__image">
                <img
                  v-if="checkExtension(item.actionVideoLink)"
                  :src="`${getUrl()}${item.actionVideoLink}`"
                  width="100"
                  alt="">
                <video
                  v-else
                  :src="`${getUrl()}${item.actionVideoLink}`"
                  muted
                  width="100"
                  @mouseenter="playVideo"
                  @mouseleave="pauseVideo"
                ></video>
              </div>
              <div class="img-list-item__image-info">
                <div class="img-list-item__name">{{ item.actionName }}</div>
                <div class="img-list-item__metadata">
                  <div
                    :class="['img-list-item__tag', {'img-list-item__tag--green': item.actionType === 4}]"
                  >
                    {{ item.actionType === 3 ? 'Web3D' : 'UE3D' }}
                  </div>
                  <div class="img-list-item__time">
                    <img src="@/assets/aihuman/time-ico.png" alt="">
                    {{ item.actionSecond }}s
                  </div>
                </div>

                <div class="img-list-item__mean">
                  <h6>
                    动作含义:
                  </h6>
                  <div class="img-list-item__mean-text">
                    {{ item.actionMeaning }}
                  </div>
                </div>
              </div>
            </div>

            <div class="img-list-item__footer">
              <button v-if="permissionList.editBtn" type="button" @click="editAction(item)">
                编辑
              </button>
              <el-dropdown>
                <div class="el-icon-more"></div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="previewAction(item)">详情</el-dropdown-item>
                  <el-dropdown-item v-if="permissionList.editBtn" @click.native="toggleAction(item)">{{
                      item.status === 0 ? '停用' : '启用'
                    }}
                  </el-dropdown-item>
                  <el-dropdown-item v-if="permissionList.deleteBtn" @click.native="removeItem(item)">删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>


            <el-checkbox v-if="isShowCheck" v-model="item.checked" class="checkbox-style"/>
          </li>
        </ul>
      </div>

      <div class="pagination">
        <el-pagination
          background
          @size-change="getList"
          @current-change="getList"
          :current-page.sync="paging.pageNo"
          :page-sizes="[12, 24, 48, 96]"
          :page-size.sync="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total">
        </el-pagination>
      </div>
    </template>
    <empty-data v-else/>
    <add-action
      ref="addAction"
      @save="getList"
    />
  </div>
</template>

<style scoped lang="scss">
@import "~@/styles/aihuman/aihuman-assets";
</style>
